<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      div {
        width: 400px;
        height: 400px;
        background: red;
      }
    </style>
    <!--1.link进来的css阻塞页面渲染-->
    <!--<link rel="stylesheet" href="/css/sleep-6000-common.css">-->
    <!--2.defer 的作用-->
    <!--<script defer type="text/javascript" src="/js/logDiv.js"></script>-->
    <!--3.link 进来的 css不阻塞页面解析-,但是阻塞渲染->
    <link rel="stylesheet" href="/css/sleep-10000-common.css">
    <script defer type="text/javascript" src="/js/logDiv.js"></script>
    <!--4.js阻塞页面解析-->
    <!--<script type="text/javascript" src="/js/block.js"></script>-->
    <!--<script defer type="text/javascript" src="/js/logDiv.js"></script>-->
    <!--5.js阻塞页面渲染-->
    <!-- <script type="text/javascript" src="/js/block.js"></script> -->
  </head>
  <body>
    <div></div>
  </body>
</html>
